<!--&lt;!&ndash; src/Home.vue &ndash;&gt;-->
<!--<template>-->
<!--  <div class="container">-->
<!--    <div class="left" @click="goToStudentLogin">-->
<!--      <el-card class="card student-card">-->
<!--        <h2>我是学生</h2>-->
<!--      </el-card>-->
<!--    </div>-->
<!--    <div class="right" @click="goToTeacherLogin">-->
<!--      <el-card class="card teacher-card">-->
<!--        <h2>我是老师</h2>-->
<!--      </el-card>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  methods: {-->
<!--    goToStudentLogin() {-->
<!--      this.$router.push('/login2'); // 导航到学生登录页面-->
<!--    },-->
<!--    goToTeacherLogin() {-->
<!--      this.$router.push('/login1'); // 导航到老师登录页面-->
<!--    },-->
<!--  },-->
<!--};-->
<!--</script>-->

<!--<style>-->
<!--.container {-->
<!--  display: flex;-->
<!--  height: 100vh; /* 使容器充满屏幕 */-->
<!--  justify-content: center;-->
<!--  align-items: center;-->
<!--  background-color: #bd4949; /* 设置背景颜色 */-->
<!--}-->

<!--.left, .right {-->
<!--  flex: 1; /* 平分左右两侧 */-->
<!--  display: flex;-->
<!--  justify-content: center;-->
<!--  align-items: center;-->
<!--  cursor: pointer; /* 鼠标悬停时显示手指 */-->
<!--}-->

<!--.card {-->
<!--  width: 400px; /* 卡片宽度 */-->

<!--  padding: 20px;-->
<!--  text-align: center;-->
<!--  border-radius: 8px; /* 边框圆角 */-->
<!--  transition: all 0.3s; /* 动画过渡效果 */-->
<!--}-->

<!--.student-card {-->
<!--  background-color: #409eff; /* 学生卡片背景颜色 */-->
<!--  color: #ffffff; /* 学生卡片字体颜色 */-->
<!--}-->

<!--.teacher-card {-->
<!--  background-color: #67c23a; /* 老师卡片背景颜色 */-->
<!--  color: #ffffff; /* 老师卡片字体颜色 */-->
<!--}-->

<!--.card:hover {-->
<!--  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* 鼠标悬停时阴影效果 */-->
<!--}-->
<!--</style>-->
<!--<template>-->
<!--  <div-->
<!--      id="map"-->
<!--      :style="{-->
<!--      width: '700px',-->
<!--      height: '730px',-->
<!--      marginTop: '10px',-->
<!--    }"-->
<!--  ></div>-->
<!--</template>-->

<!--<script>-->
<!--import china from "../assets/china.json"; //引入地图json文件-->
<!--export default {-->
<!--  mounted() {-->
<!--    this.initChart();-->
<!--  },-->

<!--  props: {-->
<!--    mapData: {  //接收父组件传过来的值-->
<!--      type: Object,-->
<!--      default: () => ({}),-->
<!--    },-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      options: {},-->
<!--      chart: null,-->
<!--    };-->

<!--    methods: {-->
<!--      // 地图-->
<!--      initChart()-->
<!--      {-->
<!--        this.$echarts.registerMap("china", china); //echarts的map需要注册，根据引入的json文件名，并定义map的名称-->
<!--        this.chart = this.$echarts.init(document.getElementById("map"), null, {-->
<!--          renderer: "svg",-->
<!--        }); //init()挂载在某个元素，所以还需要在mounted调用， { renderer: "svg" } 将原来的canvas绘图改为svg 清晰度更高-->
<!--        this.drawMap();-->
<!--      },-->
<!--      drawMap()-->
<!--      {-->
<!--        this.chart.setOption(-->
<!--            {-->
<!--              title: {-->
<!--                text: "平台运营实时数据",-->
<!--                textStyle: {-->
<!--                  color: "#fff",-->
<!--                  fontSize: 28,-->
<!--                },-->
<!--              },-->

<!--              tooltip: { //鼠标移入的提示信息框-->
<!--                show: true,-->
<!--                trigger: "item",-->
<!--                formatter: function (a, b) {-->
<!--                  // 将人数改千分位-->
<!--                  let a2 = "";-->
<!--                  let olda = Number(a["data"].value);-->

<!--                  if (olda >= 0) {-->
<!--                    a2 = olda;-->
<!--                    if (olda > 999) {-->
<!--                      let parts = olda.toString().split(".");-->
<!--                      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");-->
<!--                      a2 = parts.join(".");-->
<!--                    }-->
<!--                  }-->
<!--                  // 日活兼容-->
<!--                  let a3 = a["data"].ratio ? a["data"].ratio : 0;-->
<!--                  let a1 = a["name"];-->
<!--                  if (a1 == "台湾省" && !a2) { // 台湾省显示暂无数据-->
<!--                    return `${a1}<br/> 暂无数据`;-->
<!--                  }-->

<!--                  return `${a1}<br/>累计注册: ${a2}  <br/>日活: ${a3} %`;-->
<!--                },-->
<!--              },-->

<!--              series: [-->
<!--                {-->
<!--                  type: "map",-->
<!--                  map: "china", //对应registerMap() 对应的名称-->
<!--                  top: "150",  //调整地图在页面的位置-->
<!--                  zoom: 1.3,  //缩放比例-->
<!--                  emphasis: {-->
<!--                    label: {show: false},-->
<!--                    itemStyle: {-->
<!--                      areaColor: "rgba(136, 132, 216)",-->
<!--                    },-->
<!--                  },-->
<!--                  itemStyle: {-->
<!--                    borderColor: "#fff",-->
<!--                  },-->
<!--                  data: this.mapData.mapArr, //有数据才显示颜色-->
<!--                },-->
<!--              ],-->

<!--              visualMap: {-->
<!--                show: true,-->
<!--                type: "continuous",-->
<!--                calculable: true,-->
<!--                orient: "horizontal",-->
<!--                textStyle: {-->
<!--                  color: "#fff",-->
<!--                },-->
<!--                min: 0,-->
<!--                max: 10000000,-->
<!--                text: ["累计注册/人", ""],-->
<!--                color: ["#df3d20", "#fff"],-->
<!--                inRange: {-->
<!--                  // color: [ "#fff","#44effb", "#3399ff","#2b8afe", "#006699"],-->
<!--                  color: ["#44effb", "#3399ff", "#2b8afe", "#006699"],  //地图颜色-->
<!--                },-->
<!--              },-->
<!--            },-->
<!--            true-->
<!--        );-->
<!--      }-->
<!--    ,-->
<!--    }-->
<!--  ,-->

<!--    watch: {-->
<!--      // handler  监听数据发生变化需要具体执行的方法-->
<!--      // deep  需要监听的数据的深度，一般用来监听对象中某个属性的变化-->
<!--      mapData: {-->
<!--        handler()-->
<!--        {-->
<!--          this.drawMap();-->
<!--        }-->
<!--      ,-->
<!--        deep: true,-->
<!--      }-->
<!--    ,-->
<!--    }-->
<!--  ,-->
<!--  };-->
<!--</script>-->

<!--<style></style>-->
<template>
  <div id="map" :style="{width: '700px', height: '730px', marginTop: '10px'}"></div>
</template>

<script>
import * as echarts from 'echarts';
import chinaJson from '../assets/china.json'; // 引入地图json文件
import axios from 'axios'; // 确保导入axios

export default {
  name: 'ChinaMap',
  data() {
    return {
      chart: null, // 用于存储ECharts实例
    };
  },
  mounted() {
    this.initMap();
    this.fetchMapData(); // 获取地图数据
  },
  methods: {
    initMap() {
      this.chart = echarts.init(document.getElementById('map'));
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}',
        },
        visualMap: {
          inRange: {
            color: ['#e0ffff', '#006edd'],
          },
        },
        series: [
          {
            name: '中国地图',
            type: 'map',
            mapType: 'china',
            roam: false, // 是否允许缩放和拖动
            data: [], // 初始数据为空
          },
        ],
      };
      echarts.registerMap('china', chinaJson);
      this.chart.setOption(option);
    },
    updateMapData(dataList) {
      const mapData = dataList.map(item => ({
        name: item.field,
        value: parseInt(item.value, 10),
      }));
      this.chart.setOption({
        series: [
          {
            data: mapData,
          },
        ],
      });
    },
    fetchMapData() {
      axios.get('http://localhost:8082/getdata8').then(response => {
        const dataList = response.data;
        this.updateMapData(dataList);
      }).catch(error => {
        console.error('获取地图数据失败:', error);
      });
    },
  },
};
</script>
